<script setup>
import { reactive, toRefs } from 'vue';

// 1. 常规使用
// const user = reactive({
//   name: '张三',
//   age: 18,
//   sex: '男'
// })

// 2. 解构使用(踩坑)
// 用reactive函数包装的对象中的属性一旦解构就丢失响应式
// const { name, age, sex } = reactive({
//   name: '张三',
//   age: 18,
//   sex: '男'
// })

// 3. 既可以解构, 又保持响应式
//  toRefs函数可以让对象中解构出来的属性重新具备响应式
const user = reactive({
  name: '张三',
  age: 18,
  sex: '男'
})
const { name, age, sex } = toRefs(user)
</script>

<template>
  <div>
    <!-- <p>姓名: {{ user.name }}, 年龄: {{ user.age }}, 性别: {{ user.sex }}</p> -->
    <p>姓名: {{ name }}, 年龄: {{ age }}, 性别: {{ sex }}</p>
    <button @click="name = '刘德华'">修改数据</button>
  </div>
</template>

<style scoped></style>
